<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="https://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8">
    <title>Snail Job 迁移工具</title>
    <link th:href="@{/static/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/static/bootstrap.bundle.min.js}"></script>
    <style>
        .body {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .mx-16px {
            margin-top: 32px;
            margin-bottom: 32px;
        }

        .mb-16px {
            margin-bottom: 32px;
        }

        .flex-between {
            display: flex;
            justify-content: space-between;
        }

        #progress {
            white-space: pre;
        }

        .form-card {
            width: 100%;
        }

        .flex-center {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 32px;
        }
    </style>
</head>

<body>
    <div class="body">
        <div class="flex-center mx-16px">
            <h2>Snail Job 迁移工具</h2>
        </div>
        <div id="alert" hidden class="alert alert-primary mb-16px" role="alert">
            <span id="alert-title">迁移已开始，请耐心等待...</span>
            <hr class="divider" />
            <div id="progress"></div>
        </div>
        <div>
            <div class="flex-between">
                <h2>Snail Job 组配置</h2>
                <button id="migration" type="button" class="btn btn-primary">开始迁移</button>
            </div>
            <form id="namespace">
                <div class="mb-3">
                    <label for="id" class="form-label">组 ID</label>
                    <input class="form-control" id="id">
                </div>
                <div class="mb-3">
                    <label for="name" class="form-label">组名称</label>
                    <input class="form-control" id="name">
                </div>
            </form>
        </div>
        <hr class="divider mx-16px" />
        <div class="flex-center">
            <div class="form-card">
                <h2>源数据库</h2>
                <form id="sourceDB">
                    <div class="mb-3">
                        <label for="url" class="form-label">URL</label>
                        <textarea class="form-control" rows="3"
                            id="url">jdbc:mysql://127.0.0.1:3306/xxl_job?useSSL=false&characterEncoding=utf8&useUnicode=true</textarea>
                    </div>
                    <div class="mb-3">
                        <label for="user" class="form-label">用户名</label>
                        <input class="form-control" id="user" value="root">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" value="root">
                    </div>
                </form>
            </div>
            <div class="vr"></div>
            <div class="form-card">
                <h2>目标数据库</h2>
                <form id="targetDB">
                    <div class="mb-3">
                        <label for="url" class="form-label">URL</label>
                        <textarea class="form-control" rows="3"
                            id="url">jdbc:mysql://127.0.0.1:3306/snail_job?useSSL=false&characterEncoding=utf8&useUnicode=true</textarea>
                    </div>
                    <div class="mb-3">
                        <label for="user" class="form-label">用户名</label>
                        <input class="form-control" id="user" value="root">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" value="root">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        const migrationBtn = document.getElementById('migration')
        migrationBtn.addEventListener('click', startMigration);

        function startMigration() {
            const namespaceForm = document.getElementById('namespace').elements;
            const sourceDBForm = document.getElementById('sourceDB').elements;
            const targetDBForm = document.getElementById('targetDB').elements;

            const namespace = {
                id: namespaceForm.id.value,
                name: namespaceForm.name.value
            }

            const sourceDB = {
                url: sourceDBForm.url.value,
                user: sourceDBForm.user.value,
                password: sourceDBForm.password.value
            }

            const targetDB = {
                url: targetDBForm.url.value,
                user: targetDBForm.user.value,
                password: targetDBForm.password.value
            }

            const data = { namespace, sourceDB, targetDB };

            const alertDom = document.getElementById('alert')
            const alertTitleDom = document.getElementById('alert-title');
            migrationBtn.setAttribute('disabled', true);
            migrationBtn.innerHTML = '迁移中...';
            alertDom.className = 'alert alert-primary';
            alertTitleDom.innerHTML = '迁移已开始，请耐心等待...'

            fetch('/data-migration', {
                method: 'POST',
                body: JSON.stringify(data),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(response => response.text())
                .then(res => {
                    if (res && String(res) === 'true') {
                        getMigrationProgress()
                    }
                    throw new Error('迁移失败，请检查配置信息')
                })
                .catch(() => {
                    const alertDom = document.getElementById('alert')
                    alertDom.removeAttribute('hidden');
                    alertDom.className = 'alert alert-danger';
                    alertTitleDom.innerHTML = '迁移失败，请检查配置信息'
                    migrationBtn.removeAttribute('disabled');
                    migrationBtn.innerHTML = '开始迁移';
                })
        }

        let interval = null;

        function getMigrationProgress() {
            const alertDom = document.getElementById('alert')
            const progressDom = document.getElementById('progress');
            const alertTitleDom = document.getElementById('alert-title');
            alertDom.removeAttribute('hidden');
            interval = setTimeout(getMigrationProgress, 3000);
            fetch('/migration/progress', {
                method: 'POST'
            }).then(response => response.json())
                .then(res => {
                    progressDom.innerHTML = `Namespace: Total(${res.namespaceCollector.total}) Success(${res.namespaceCollector.success}) Fail(${res.namespaceCollector.error})\nGroup Config: Total(${res.groupConfigCollector.total}) Success(${res.groupConfigCollector.success}) Fail(${res.groupConfigCollector.error})\nJob: Total(${res.jobCollector.total}) Success(${res.jobCollector.success}) Fail(${res.jobCollector.error})`;
                    if (res.namespaceCollector.total === res.namespaceCollector.success + res.namespaceCollector.error
                        && res.groupConfigCollector.total === res.groupConfigCollector.success + res.groupConfigCollector.error
                        && res.jobCollector.total === res.jobCollector.success + res.jobCollector.error
                    ) {
                        clearTimeout(interval);
                        interval.value = undefined;
                        alertDom.className = 'alert alert-success';
                        alertTitleDom.innerHTML = '迁移完成，请检查目标数据库';
                        migrationBtn.removeAttribute('disabled');
                        migrationBtn.innerHTML = '开始迁移';
                        return;
                    }
                    alertDom.className = 'alert alert-primary';
                    alertTitleDom.innerHTML = '迁移已开始，请耐心等待...'
                })
        }
    </script>
</body>

</html>